<div>


    <div class="register">
        <!-- <form action=""> -->
        <p><label for="">name:</label><input type="text" @field="name" /></p>
        <p><label for="">password:</label><input type="text" @field="password" /></p>
        <p><label for="">repeat password:</label><input type="password" @field="repeat_password" /></p>
        <p>is American: <input type="checkbox" @field="isAmerican" /></p>
        <p @field="gender">Gender:
            <input type="radio" @field="male" name="gender" />
            <input type="radio" @field="female" name="gender" />
        </p>
        <p><label for="">province:</label>
            <select @field="selected">
                <option @field="province|">province</option>
            </select>
        </p>
        <p>
            <button @Click="reg">register</button>
            <button>reset</button>
        </p>
        <!-- </form> -->

    </div>

</div>
<script>
    makeCalo({
        model: {
            name: 'mrclown',
            password: '123',
            repeat_password: '123',
            isAmerican: true,
            gender: {
                male: true,
                female: false
            },
            province: ['Henan', 'Shanghai'],
            selected: 'Shanghai'
        },
        reg(el) {
            console.log(el);
            alert('going to register')
        }
    })
</script>